
 <template>
 	<view class="content">
 		<view class="cul-wrapper">
 			<view v-if="isOver" class="msg-over">没有更多消息了</view>
 			<block v-for="(item,index) in hisMsgs" :key="item.id">
 				<view :class="[item.isme?'msg-me':'msg-service']" :id="item.id">
 					<view class="msg-text">
 						<view class="msg-text-content">
 							<text>{{item.msg}}</text>
 						</view>
 					</view>
 				</view>
 			</block>
 			<view class="cul-date">{{curDate | formatDate}}</view>
 			<block>
 				<view class="msg-service">
 					<view class="msg-text">
 						<view class="msg-text-content">
 							<view class="msg-introduce">您好，请先选择问题分类，我将为您解答。</view>
 							<view class="msg-classify">
 								<view class="msg-classify-tit"><text class="msg-classify-name">分类1：</text>具体位置</view>
 								<view class="msg-classify-click" @click="consultClick(1)">[此类问题请点我]</view>
 							</view>
 							<view class="msg-introduce">您好，请先选择问题分类，我将为您解答。</view>
 							<view class="msg-classify">
 								<view class="msg-classify-tit"><text class="msg-classify-name">分类2：</text>如何预定</view>
 								<view class="msg-classify-click" @click="consultClick(2)">[此类问题请点我]</view>
 							</view>
 							<view class="msg-introduce">您好，请先选择问题分类，我将为您解答。</view>
 							<view class="msg-classify">
 								<view class="msg-classify-tit"><text class="msg-classify-name">分类3：</text>组团出行</view>
 								<view class="msg-classify-click" @click="consultClick(3)">[此类问题请点我]</view>
 							</view>
 						</view>
 					</view>
 				</view>
 			</block>
 			<block v-for="(item,index) in msgs" :key="index">
 				<view :class="[item.isme?'msg-me':'msg-service']" :id="'msg-'+index">
 					<view class="msg-text">
 						<view class="msg-text-content">
 							<text>{{item.msg}}</text>
 						</view>
 					</view>
 				</view>
 			</block>
 		</view>
 		<view class="operation" :class="{'conversion':!conversion}">
 			<input class="uni-input" type="text" v-model="msgInput.msg1" :class="[conversion?'msg-input1':'msg-input2']" @tap="sub1(msgInput.msg2)" />
 			<input type="text" v-model="msgInput.msg2" :class="[conversion?'msg-input2':'msg-input1']" @tap="sub2(msgInput.msg1)" />
 		</view>
 	</view>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
 				indexRegion:'',
 				listPage: 0,
 				isOver: false,
 				curDate: '1588061853944',
 				//控制按钮和文本框样式和功能的转换
 				conversion: true,
 				msgInput: {
 					msg1: '',
 					msg2: ''
 				},
 				//消息列表
 				msgs: [],
 				hisMsgs: []
 			}
 		},
 		onLoad(e) {
 		   this.indexRegion = uni.getStorageSync('indexReg');
 		   console.log(this.indexRegion)
 		  }, 
 		filters: {
 			formatDate: function(value) {
 				var date = new Date();
 				//date.setTime(value);
 				var month = date.getMonth() + 1;
 				var hours = date.getHours();
 				if (hours < 10)
 					hours = "0" + hours;
 				var minutes = date.getMinutes();
 				if (minutes < 10)
 					minutes = "0" + minutes;
 				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
 					" " + hours + ":" + minutes;
 				return time;
 			}
 
 		},
 		onBackPress() {
 		     uni.setStorageSync('setStatusIndexFunc', 0);
 		     // this.active = 0;
 		     uni.navigateTo({
 		      url: '../index/index?region='+this.indexRegion
 		     });
 		     return true
 		    },  
 		methods: {
 			endOver() { //设置禁用下拉加载
 				const pages = getCurrentPages();
 				const page = pages[pages.length - 1];
 				const currentWebview = page.$getAppWebview();
 				currentWebview.setStyle({
 					pullToRefresh: {
 						support: false,
 						style: plus.os.name === 'Android' ? 'circle' : 'default'
 					}
 				});
 				console.log('没有更多数据了，禁用');
 			},
 			consultClick(id) {
 				console.log(id)
 				this.sub(id)
 			},
 			//滚动到指定位置
 			jumpScroll() {
 				this.$nextTick(function() {
 					uni.pageScrollTo({
 						scrollTop: 99999,
 						duration: 0
 					});
 				})
 			},
 			sendMsg(obj) {
 				let anotherMsg = {
 					isme: false,
 					msg: '您好，很高兴为你服务',
 				}
 				this.msgs.push(anotherMsg)
 				this.jumpScroll()
 			},
 			sub1(val) {
 				if (!this.conversion) {
 					this.sub(val)
 				}
 			},
 			sub2(val) {
 				if (this.conversion) {
 					this.sub(val)
 				}
 			},
 			sub(val) {
 				console.log('222')
 				console.log(val)
 				let _self = this;
 				if (val) {
 					//清空输入框中的文字
 					this.msgInput.msg1 = ''
 					this.msgInput.msg2 = ''
 					let msg = {
 						isme: true,
 						msg: val
 					}
 					this.msgs.push(msg)
 					this.conversion = !this.conversion
 					this.jumpScroll()
 					setTimeout(() => {
 						//console.log('x111')
 
 					}, 50);
 					this.sendMsg()
 				} else {
 					this.conversion = !this.conversion
 					this.jumpScroll()
 				}
 			}
 		},
 		onPullDownRefresh() {
 			let _this = this;
 			console.log('refresh2');
 			let msgArr = [{
 					msg: '问题1',
 					id: 'm1',
 					mark: 'me',
 					isme: true,
 					time: '2020-10-1'
 				},
 				{
 					msg: '回复1',
 					id: 'l1',
 					mark: 'service',
 					isme: false,
 					time: '2020-10-2'
 				},
 				{
 					msg: '问题2',
 					id: 'm2',
 					mark: 'me',
 					isme: true,
 					time: '2020-10-1'
 				},
 				{
 					msg: '回复2',
 					id: 'l2',
 					mark: 'service',
 					isme: false,
 					time: '2020-10-2'
 				}
 			]
 
 			this.hisMsgs.push(...msgArr)
 			console.log('this.hisMsgs1')
 			console.log(this.hisMsgs)
 			setTimeout(function() {
 				uni.stopPullDownRefresh();
 			}, 100);
 		},
 	}
 </script>
 
 <style>
 	page {
 		background-color: #EFEFEF;
 	}
 
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		flex: 1;
 		margin-bottom: 120rpx;
 	}
 
 	.msg-over {
 		font-size: 24rpx;
 		text-align: center;
 		color: #999999;
 	}
 
 	.cul-wrapper {
 		padding: 0 35rpx;
 		box-sizing: border-box;
 	}
 
 	.cul-date {
 		padding-top: 20rpx;
 		color: #999999;
 		font-size: 24rpx;
 		text-align: center;
 	}
 
 	.msg-me,
 	.msg-service {
 		display: flex;
 		align-items: flex-start;
 		width: 680rpx;
 		margin: 30rpx 0;
 		box-sizing: border-box;
 		overflow: hidden;
 	}
 
 	/* .bg{
 			background-color: blue;
 		} */
 	.msg-me {
 		justify-content: flex-end;
 	}
 
 	.msg-service {
 		justify-content: flex-start;
 	}
 
 	.avatar {
 		width: 70rpx;
 		height: 70rpx;
 		border-radius: 50%;
 	}
 
 	.msg-text {
 		width: 560rpx;
 	}
 
 	.msg-me>.msg-text {
 		display: flex;
 		justify-content: flex-end;
 	}
 
 	.msg-text-content {
 		line-height: 35rpx;
 		display: inline-block;
 		box-sizing: border-box;
 		padding: 30rpx;
 		font-size: 28rpx;
 	}
 
 	.msg-introduce {
 		color: #333333;
 		font-size: 26rpx;
 		line-height: 36rpx;
 	}
 
 	.msg-classify-tit {
 		color: #333333;
 		font-size: 26rpx;
 		line-height: 43rpx;
 	}
 
 	.msg-classify-name {
 		font-size: 30rpx;
 		font-weight: bold;
 	}
 
 	.msg-classify-click {
 		color: #2B8FFF;
 		font-size: 26rpx;
 		line-height: 56rpx;
 	}
 
 	.msg-me>.msg-text>.msg-text-content {
 		margin-left: 70rpx;
 		background-color: #2B8FFF;
 		color: #FFFFFF;
 		font-size: 30rpx;
 		border-top-right-radius: 44rpx;
 		border-bottom-left-radius: 44rpx;
 		border-top-left-radius: 44rpx;
 		margin-right: 15rpx;
 	}
 
 	.msg-service>.msg-text>.msg-text-content {
 		color: #333333;
 		margin-left: 15rpx;
 		background-color: #FFFFFF;
 		/* border: 1rpx solid #d5e0e5; */
 		border-bottom-left-radius: 44rpx;
 		border-bottom-right-radius: 44rpx;
 		border-top-right-radius: 44rpx;
 		/* 		margin-right: 70rpx; */
 		color: #333333;
 	}
 
 	.operation {
 		display: flex;
 		position: fixed;
 		left: 0;
 		bottom: 0;
 		align-items: center;
 		/* background-color: transparent; */
 		background: #EFEFEF;
 		padding: 10px 35rpx;
 		border-top: 1rpx solid rgba(184, 184, 184, 0.1);
 		width: 100vw;
 	}
 
 	.conversion {
 		flex-direction: row-reverse;
 		justify-content: flex-end;
 	}
 
 	.msg-input1 {
 		background: #FFFFFF;
 		height: 40px;
 		width: 520rpx;
 		border-radius: 10px;
 		padding: 0 20rpx;
 		border: 1rpx solid rgba(0, 0, 0, 0.1);
 	}
 
 	.msg-input2 {
 		display: flex;
 		align-items: center;
 		width: 140rpx;
 		height: 40px;
 		background-image: url('');
 		background-repeat: no-repeat;
 		background-position: center center;
 		background-size: 47rpx 42rpx;
 		/*这个颜色是因为组件位置交换的时候，字体会有一瞬间继续留在框内，这里把内容变为透明即可*/
 		color: rgba(0, 0, 0, 0);
 	}
 </style>
